Blue outlines / focus rings

- introduce two new colors: $focus_border_color for focused / outlined elements and $_coloured_focus_border_color for focused / outlined elements with a colored background color, like suggested/destructive buttons or selected elements
- set outline / focus color, offset and style accordingly for all widgets
- adapt entry focus color

diff --git a/gtk/theme/Adwaita/_colors.scss b/gtk/theme/Adwaita/_colors.scss
index 039c1e051568508e92a1fb34063a440225ea6124..6c7f211ad123ae9fd38d154bb4433f0e7d3222df 100644 (file)
--- a/gtk/theme/Adwaita/_colors.scss
+++ b/gtk/theme/Adwaita/_colors.scss
@@ -76,3 +76,5 @@ $progress_border_color: $selected_borders_color;
 $checkradio_bg_color: if($variant == 'light', $selected_bg_color, lighten($selected_bg_color,10%));
 $checkradio_fg_color: $selected_fg_color;
 $checkradio_borders_color: if($variant == 'light', darken($checkradio_bg_color,20%), darken($checkradio_bg_color,40%));
+$focus_border_color: if($variant == 'light', transparentize($selected_bg_color, 0.5), transparentize($selected_bg_color, 0.3));
+$alt_focus_border_color: transparentize(white, 0.5);

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 692af6dc79987719902c88c286348e630609c16d..cca5b1d8067a2c4670ecdf8d1a79d3f8007c72f9 100644 (file)
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -11,32 +11,6 @@ $menu_radius: 5px;
 $window_radius: $button_radius + 3;
 $popover_radius: $button_radius + 4;
 
-button:focus(visible),
-checkbutton:focus(visible),
-radiobutton:focus(visible),
-switch:focus(visible),
-label:focus(visible),
-row:focus(visible),
-flowboxchild:focus(visible) {
-  // We use the outline properties to signal the focus properties
-  // to the adwaita engine: using real CSS properties is faster,
-  // and we don't use any outlines for now.
-
-  outline-color: gtkalpha(currentColor, 0.3);
-  outline-style: dashed;
-  outline-offset: -3px;
-  outline-width: 1px;
-}
-
-// Widgets that draw their focus indicator outset and not inset
-scale:focus(visible) > trough {
-  outline-color: gtkalpha(currentColor, 0.3);
-  outline-style: dashed;
-  outline-offset: 2px;
-  outline-width: 1px;
-}
-
-
 /***************
  * Base States *
  ***************/
@@ -64,6 +38,86 @@ dnd {
   -gtk-icon-size: 32px;
 }
 
+/*********
+ * Outlines *
+ ********/
+
+label:focus(visible),
+row:focus(visible),
+flowboxchild:focus(visible) {
+  // We use the outline properties to signal the focus properties
+  // to the adwaita engine: using real CSS properties is faster,
+  // and we don't use any outlines for now.
+
+  outline-color: $focus_border_color;
+  outline-style: solid;
+  outline-offset: -1px;
+  outline-width: 2px;
+  :selected & { outline-color: $alt_focus_border_color; }
+}
+
+// Widgets that draw their focus indicator outset and not inset
+scale:focus(visible) > trough {
+  outline-color: $focus_border_color;
+  outline-style: solid;
+  outline-offset: 10px;
+  outline-width: 2px;
+}
+
+button:focus(visible), modelbutton:focus(visible) {
+  outline-color: $focus_border_color;
+  outline-style: solid;
+  outline-offset: -2px;
+  outline-width: 2px;
+
+  row:selected & { outline-color: $alt_focus_border_color; }
+
+  &.suggested-action, &.destructive-action { &, &:hover, &:active { outline-color: $alt_focus_border_color; } }
+}
+
+// Draw the "outline" around the whole switch not the slider
+switch:focus(visible) {
+  &, &:hover { slider { outline-color: transparent; } }
+  &:focus {
+    box-shadow: 0 0 0 3px if($variant=='light', lighten(opacify($focus_border_color, 1), 20%), $focus_border_color);
+  }
+  row:selected & { outline-color: $alt_focus_border_color; }
+}
+
+checkbutton:focus(visible),
+radiobutton:focus(visible) {
+  outline-color: $focus_border_color;
+  outline-style: solid;
+  outline-offset: 1px;
+  outline-width: 2px;
+  row:selected & , treeview:selected & { outline-color: $alt_focus_border_color; }
+}
+
+row:focus(visible) {
+  outline-color: $focus_border_color;
+  outline-offset: -2px;
+  outline-style: solid;
+  &:selected {
+    outline-color: $alt_focus_border_color;
+  }
+}
+
+treeview:focus(visible) {
+  outline-color: $focus_border_color;
+  outline-style: solid;
+  outline-width: 2px;
+  &:selected {
+    outline-color: $alt_focus_border_color;
+  }
+}
+
+notebook:focus(visible) {
+  outline-color: $focus_border_color;
+  outline-style: solid;
+  outline-offset: -1px;
+  outline-width: 2px;
+}
+
 /*
    These wildcard seems unavoidable, need to investigate.
    Wildcards are bad and troublesome, use them with care,
@@ -149,8 +203,6 @@ flowbox {
 
     &:selected {
       @extend %selected_items;
-
-      outline-offset: -2px;
     }
   }
 }
@@ -786,8 +838,6 @@ button {
     // child, a label needs just lateral padding while an icon needs vertical
     // padding added too.
 
-    outline-offset: -3px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
-
     > label {
       padding-left: 6px;  // label padding
       padding-right: 6px; //
@@ -928,7 +978,6 @@ modelbutton.flat {
   padding-left: 5px;
   padding-right: 5px;
   border-radius: $button_radius;
-  outline-offset: -2px;
 
   @extend %undecorated_button;
 
@@ -2018,8 +2067,6 @@ notebook {
       min-width: 30px;
       padding: 3px 12px;
 
-      outline-offset: -5px;
-
       color: $insensitive_fg_color;
       font-weight: bold;
 
@@ -2243,7 +2290,6 @@ treeview ~ scrollbar.vertical {
 switch {
   font-weight: bold;
   font-size: smaller;
-  outline-offset: -4px;
 
   // similar to the .scale
   border: 1px solid $borders_color;
@@ -2382,7 +2428,6 @@ switch {
 checkbutton.text-button, radiobutton.text-button {
   // this is for a nice focus on check and radios text
   padding: 2px 0;
-  outline-offset: 0;
   border-spacing: 4px;
 }
 
@@ -2628,8 +2673,6 @@ scale {
   // the backing bit
   > trough {
     @extend %scale_trough;
-
-    outline-offset: 2px;
   }
 
   // the colored part of the backing bit
@@ -4286,8 +4329,6 @@ button.emoji-section {
   box-shadow: none;
   text-shadow: none;
 
-  outline-offset: -5px;
-
   &:dir(ltr):not(:last-child) { margin-right: 0; }
   &:dir(rtl):not(:last-child) { margin-left: 0; }
 

diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss
index 9d95c6085706f92554ce6a4f0d9cb7df1731a52f..3c1de0e34edd3e25a0024dae62a0040d97848447 100644 (file)
--- a/gtk/theme/Adwaita/_drawing.scss
+++ b/gtk/theme/Adwaita/_drawing.scss
@@ -22,14 +22,13 @@
 }
 
 // entries
-@function entry_focus_border($fc:$selected_bg_color) {
-  @if $variant == 'light' { @return $fc; }
-  @else { @return if($fc==$selected_bg_color, $selected_borders_color, darken($fc, 35%)); }
+@function entry_focus_border($fc:$focus_border_color) {
+  @return $fc;
 }
 
-@function entry_focus_shadow($fc:$selected_bg_color) { @return inset 0 0 0 1px $fc; }
+@function entry_focus_shadow($fc:$focus_border_color) { @return inset 0 0 0 1px $fc; }
 
-@mixin entry($t, $fc:$selected_bg_color, $edge: none) {
+@mixin entry($t, $fc:$focus_border_color, $edge: none) {
 //
 // Entries drawing function
 //
@@ -198,7 +197,6 @@
   // normal button
   //
     color: $tc;
-    outline-color: transparentize($tc, 0.7);
     border-color: if($c != $bg_color, _border_color($c), $borders_color);
     border-bottom-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
     $button_fill: if($variant == 'light', linear-gradient(to top, darken($c, 4%) 2px, $c),
@@ -213,7 +211,6 @@
   // hovered button
   //
     color: $tc;
-    outline-color: transparentize($tc, 0.7);
     border-color: if($c != $bg_color, _border_color($c), $borders_color);
     border-bottom-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
     @if $variant == 'light' {
@@ -234,7 +231,6 @@
   // normal button alternative look
   //
     color: $tc;
-    outline-color: transparentize($tc, 0.7);
     border-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
     @include _button_text_shadow($tc, $c);
     @if $variant == 'light' {
@@ -254,7 +250,6 @@
   // hovered button alternative look
   //
     color: $tc;
-    outline-color: transparentize($tc, 0.7);
     border-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
     @if $variant == 'light' {
       $button_fill: linear-gradient(to bottom, lighten($c, 9%) 10%, lighten($c, 4%) 90%) !global;
@@ -274,7 +269,6 @@
   // pushed button
   //
     color: $tc;
-    outline-color: transparentize($tc, 0.7);
     border-color: if($c != $bg_color, _border_color($c), $borders_color);
     $button_fill: if($variant == 'light', image(darken($c, 14%)), image(darken($c, 9%))) !global;
     background-image: $button_fill;
@@ -396,7 +390,6 @@
     box-shadow: inset 0 1px transparentize(white, 0.9);
     text-shadow: none;
     -gtk-icon-shadow: none;
-    outline-color: transparentize($osd_fg_color, 0.7);
   }
 
   @else if $t==osd-hover {
@@ -414,7 +407,6 @@
     box-shadow: inset 0 1px transparentize(white, 0.9);
     text-shadow: none;
     -gtk-icon-shadow: none;
-    outline-color: transparentize($osd_fg_color, 0.7);
   }
 
   @else if $t==osd-active {
@@ -432,7 +424,6 @@
     box-shadow: none;
     text-shadow: none;
     -gtk-icon-shadow: none;
-    outline-color: transparentize($osd_fg_color, 0.7);
   }
 
   @else if $t==osd-insensitive {